<template>
  <div>
    <el-page-header @back="router.push('/')" class="pageHeader">
      <template #content>
        <span class="text-large font-600 mr-3"> 刷错题 </span>
      </template>
    </el-page-header>
    <div v-if="errorData.length">
      <main class="content">
        <h2>{{ errorData[i].title }}</h2>
        <br />
        <el-radio-group v-model="radio" class="select" :disabled="visibleResult">
          <el-radio label="a" size="large" class="item">A. {{ errorData[i].a }}</el-radio>
          <el-radio label="b" size="large" class="item">B. {{ errorData[i].b }}</el-radio>
          <el-radio label="c" size="large" class="item">C. {{ errorData[i].c }}</el-radio>
          <el-radio label="d" size="large" class="item">D. {{ errorData[i].d }}</el-radio>
        </el-radio-group>
      </main>

      <div class="footer">
        <div class="result" v-if="visibleResult">
          <h3 class="yes" v-if="radio === errorData[i].yes">正确</h3>
          <h3 class="error" v-else>
            {{ `错误。正确答案：${errorData[i].yes}` }}
          </h3>
        </div>
        <div class="footer-btn">
          <el-button @click="visibleResult = true" type="primary">检验</el-button>
          <el-button @click="next">下一题</el-button>
          <el-button @click="deleteError" type="success" plain>学会了
          </el-button>
        </div>
      </div>
    </div>

    <div v-else>
      <h2>还没有错题✌️</h2>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

const i = ref(0);
const visibleResult = ref(false);
const radio = ref("a");
const tooData: any = ref([]);

const errorData: any = ref([]);

onMounted(() => {
  let data: any = localStorage.getItem("errorData");
  if (data) {
    data = JSON.parse(data);
    errorData.value = data;
  }

  next();
});

const next = () => {
  if (tooData.value.length >= errorData.value.length) {
    return ElMessage({
      message: "没有更多题了",
      type: "warning",
    });
  }
  visibleResult.value = false;
  radio.value = "a";
  const num = Math.floor(Math.random() * errorData.value.length);
  if (!tooData.value.includes(errorData.value[num])) {
    i.value = num;
    tooData.value.push(errorData.value[num]);
  } else {
    next();
  }
};

const deleteError = () => {
  ElMessageBox.confirm("确定学会这道题了吗?", "Warning", {
    confirmButtonText: "确定了",
    cancelButtonText: "不确定，再看看",
    type: "warning",
  }).then(() => {
    const index = errorData.value.indexOf(errorData.value[i.value]);

    errorData.value.splice(index, 1);
    localStorage.setItem("errorData", JSON.stringify(errorData.value));
    visibleResult.value = false
    radio.value = 'a'
  });
};
</script>

<style lang="less">
ul {
  margin-top: 20px;
}

li {
  list-style: none;
}

.item {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.result {
  margin: 10px 0;

  .yes {
    font-weight: bold;
    color: rgb(31, 146, 108);
  }

  .error {
    font-weight: bold;
    color: rgb(224, 25, 18);
  }
}

.pageHeader {
  padding: 15px;
}

.content {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  padding: 20px;
  text-align: center;
}

.footer {
  width: 100%;
  margin-top: 20px;

  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;

  text-align: center;

  .footerbtn {
    display: flex;
  }
}

h2 {
  text-align: center;
}
</style>
